<template>
<article class="page page-affine-cipher container">
	<h4 class="text-center">替代密码(仿射)</h4>
	<form class="content">
		<fieldset>
			<legend>加密/解密</legend>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">字母表</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model.trim="origin" placeholder="请输入字母表" readonly>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">文 本</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model.trim="text" placeholder="请输入要处理的文本">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 码 A</label>
				<div class="col-9">
					<input type="number" class="form-control form-control-sm" v-model.trim="keyA" placeholder="请输入密码A">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">密 码 B</label>
				<div class="col-9">
					<input type="number" class="form-control form-control-sm" v-model.trim="keyB" placeholder="请输入密码B">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">操 作</label>
				<div class="col-9">
					<div class="row">
						<div class="col-6"><x-button type="primary" block @click="encrypt">加 密</x-button></div>
						<div class="col-6"><x-button type="primary" block @click="decrypt">解 密</x-button></div>
					</div>
				</div>
			</div>
			<div class="form-group row">
				<label class="col-2 col-form-label col-form-label-sm">结 果</label>
				<div class="col-9">
					<input type="text" class="form-control form-control-sm" v-model="result" readonly>
				</div>
			</div>
		</fieldset>
	</form>
</article>
</template>

<script>
let CipherJS = global.CipherJS || null
export default {
	name: 'affine-cipher',
	data () {
		return {
			origin: 'abcdefghijklmnopqrstuvwxyz',
			keyA: '',
			keyB: '',
			text: '',
			result: '',
		}
	},
	mounted () {
		CipherJS = this.$sharedObject('CipherJS')
	},
	methods: {
		// 加密
		encrypt () {
			this.result = ''
			if (!this.checkForm()) return
			let result = ''
			let len1 = this.text.length
			let len2 = this.origin.length
			let a = parseFloat(this.keyA)
			let b = parseFloat(this.keyB)
			for (let i = 0; i < len1; i++) {
				let index = this.origin.indexOf(this.text[i])
				if (index === -1) {
					result += this.text[i]
				} else {
					result += this.origin[(a * index + b) % len2]
				}
			}
			this.result = result
		},
		// 解密
		decrypt () {
			this.result = ''
			if (!this.checkForm()) return
			let a = parseFloat(this.keyA)
			let b = parseFloat(this.keyB)
			this.result = CipherJS.Affine.decrypt(this.text, a, b)
		},
		// 表单校验
		checkForm () {
			let result = true
			if (!this.origin) {
				this.$toast('请输入字母表')
				result = false
			}
			if (!this.text) {
				this.$toast('请输入要处理的文本')
				result = false
			}
			if (this.KeyA === '') {
				this.$toast('请输入密码A')
				result = false
			}
			if (this.keyB === '') {
				this.$toast('请输入密码B')
				result = false
			}
			return result
		}
	}
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-affine-cipher {
	display: flex;
	flex-direction: column;
	.content {
		height: 0;
		flex-grow: 1;
		overflow: hidden auto;
		.col-form-label {
			text-align: center;
		}
		fieldset {
			& + fieldset {
				margin-top: 1em;
			}
		}
	}
}
</style>
